<template>
  <el-dialog title="选择目录" :visible.sync="value.visible" :close-on-click-modal="false">
    <el-button type="text" @click="dirs_Path_Up">返回上一层</el-button>
    <div class="list">
      <el-card shadow="hover" v-for="(item,index) in dir_list" :key="index">
        <svg-icon name="文件夹" style="font-size: 30px; margin-right: 10px;" />
        <el-button
          type="text"
          style="position: relative; top: -2px;"
          @click="dirs_Path_Enter(item.name)"
        >{{item.name}}</el-button>
      </el-card>

      <el-card shadow="hover" v-if="dir_list.length == 0">
        <el-button type="text" style="text-align: center;">此处没有文件夹啦</el-button>
      </el-card>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close_dir_cancel">取 消</el-button>
      <el-button type="primary" @click="close_dir_list">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDirList } from '@/api/requests/file'

export default {
  props: ['value'],
  data () {
    return {
      dir_list: [],
      dir_path: '/'
    }
  },
  created () {
    this.dirs_Get_List()

  },
  watch: {
    dir_path (value) {
      this.dirs_Get_List()
    },
    value: {
      handler (val, oldVal) {
        if (val.visible == true) {
          this.dirs_Get_List()

        }
      },
      deep: true
    }
  },
  methods: {
    dirs_Get_List () {
      getDirList(this.dir_path).then(res => {
        this.dir_list = JSON.parse(res.data)
      })
    },
    dirs_Path_Up () {
      let path = this.dir_path
      if (path == '/') {
        return
      }
      path = path.substring(0, path.length - 2)
      this.dir_path = path.substring(0, path.lastIndexOf('/') + 1)

    },
    dirs_Path_Enter (name) {
      this.dir_path += name
    },
    close_dir_cancel () {
      this.$emit('input', {
        visible: false,
        isReq: false

      })
    },
    close_dir_list () {
      this.$emit('input', {
        visible: false,
        choice: this.dir_path,
        type: this.value.type,
        path: this.value.path,
        isReq: true

      })
    }

  },

}
</script>
<style lang="scss" scoped>
.list {
    margin-top: 15px;
    display: auto;
    .el-card {
        margin-bottom: 10px;
    }
}
</style>